import styled, {keyframes} from "styled-components";

export const ConfirmTitleContainer = styled.div`
  height: 30px;
  user-select: none;
`
const PolishVisible = keyframes`
  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
`
const PolishHidden = keyframes`
  from {
    //-webkit-transform: translateY(0);
    //transform: translateY(0)
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    //-webkit-transform: translateY(-5em);
    //transform: translateY(-5em);
    transform: translate3d(0, 100px, 0);
  }
`

export const ConfirmTitle = styled.div`
  margin-left: 10px;
  line-height: 30px;
  float: left;
  color: orange
`
export const ConfirmCarefulText = styled.span`
  font-size: 10px;
  color: #999;
  user-select: none
`

export const DefaultConfirmTitle = styled.div`
  float: left;
  color: orange
`

export const PolishContainer = styled.div`
  /* 获取浏览器全尺寸 */
  width: ${props => props['width'] + 'px'};
  height: ${props => props['height'] + 'px'};
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(10px);
  background: rgba(224, 224, 224, 0.3);
  transition: .2s ease-in-out;
  display: table-cell;
  vertical-align: middle;
  overflow-y: hidden;

  &.visible {
    display: block;
    animation: ${PolishVisible} .3s;
  }

  &.hidden {
    /** className中含有hidden并且没有show-exit的情况下才不显示 ，用于处理默认状态下为隐藏及动画过程中不会打断*/

    :not(.polish-container-exit) {
      display: none;
    }
  }

  &.polish-container-exit {
    animation: ${PolishHidden} .3s;
  }
`
export const PolishWindow = styled.div`
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000000;
`
